<template>
  <el-card class="box-card" shadow="always">
    <div slot="header">
      <span>客户信息管理</span>
<!--      <el-button type="primary" style="float: right; padding: 6px 12px" icon="el-icon-search">搜索</el-button>-->
    </div>
    <el-table
      ref="multipleTable"
      :loading="listLoading"
      :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="userId"
        width="55"
        label="编号"/>
      <el-table-column
        prop="username"
        width="80"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"/>
      <el-table-column
        prop="gender"
        label="性别"/>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="email"
        label="email">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="idcard"
        label="身份证号">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="paypassword"-->
<!--        label="支付密码"></el-table-column>-->
      <el-table-column
        prop="viplevel"
        label="vip等级"></el-table-column>
      <el-table-column
        prop="money"
        label="余额"></el-table-column>
      <el-table-column
        prop="paymoney"
        v-if="this.role === 'father'"
        label="充值金额"></el-table-column>
      <el-table-column
        label="修改时间|创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 10px">{{ scope.row.updateTime | formatDate }}</span>
          <br>
          <i class="el-icon-time"/>
          <span style="margin-left: 10px">{{ scope.row.createTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <el-popover
            v-model="isPay"
            placement="top"
            v-if="role === 'father' && scope.row.paymoney !== 0"
            width="160">
            <p>确定充值吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" round @click="isPay = false">取消</el-button>
              <el-button type="danger" size="mini" round @click="handleSendPay(scope.$index, scope.row)">确定</el-button>
            </div>
            <el-button
              slot="reference"
              size="mini"
              type="primary"
              @click="isPay = true">充值</el-button>
          </el-popover>

          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popover
            v-model="scope.row.visible2"
            placement="top"
            width="160">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" round @click="scope.row.visible2 = false">取消</el-button>
              <el-button type="danger" size="mini" round @click="handleDel(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" :loading="scope.row.loading" size="mini" type="danger" @click="scope.row.visible2 = true">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>

    </el-table>

    <div style="padding: 14px;">
      <el-pagination

        style="float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="list.length">
      </el-pagination>
      <div class="bottom">
        <el-button type="primary" @click="navigateTo('add')">添加客户</el-button>
<!--        <el-button type="danger" @click="massDeletion">批量删除</el-button>-->

      </div>

    </div>

  </el-card>
</template>

<script>
  import {delUser, getAllUser} from "../../api/user";
  import Cookies from "_js-cookie@2.2.0@js-cookie";
  import {sendPay} from "../../api/viplevel";

  export default {
        name: "Guest",
      data(){
        return{
          isPay: false,
          role: '',
          currentPage: 1,
          pagesize: 10,
          list: null,
          visible2: false,
          loading: null,
          listLoading: false,
          multipleSelection: null,
        }
      },
      created: function () {
        this.fetchData()
        this.role = Cookies.get("role");

      },
      methods:{
        handleSizeChange(val) {
          this.pagesize = val;
        },
        handleCurrentChange(val) {
          this.currentPage = val;
        },
        fetchData(){
          getAllUser().then(res => {
            this.list = res.data;
          }).catch(err => {
            this.$notify.error({
              title: '错误',
              message: err.toString()
            });
          })
        },
        navigateTo(val){
          this.$router.push("/user/"+val)
        },
        massDeletion() {
        },
        handleDel(row){
          row.visible2 = false
          row.loading = true
          delUser(row.userId).then(response => {
              const res = response;
            if (res.code === 1000) {
              this.list = null
              this.$message({
                message: '删除成功！',
                type: 'success'
              })
            } else {
              this.$message({
                message: '删除失败！',
                type: 'error'
              })
            }
          })
          row.loading = false
          this.fetchData()
        },
        handleEdit(index,row){
          this.$router.push({
            path: '/user',
            name: 'EditGuest',
            params: {
              id: row.userId
            }
          })
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row)
            })
          } else {
            this.$refs.multipleTable.clearSelection()
          }
        },
        handleSelectionChange(){
          this.multipleSelection = val
        },
        handleSendPay(index,data){
          let from = {
            userId: data.userId
          }
          sendPay(from).then(res=>{
            if (res.code === 1000) {
              this.list = null
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.fetchData()
            } else {
              this.$message({
                message: res.data,
                type: 'error'
              })
            }
            this.isPay = false
          })
        }
      },
    }
</script>

<style scoped>

</style>
